<template>
	<view class="hint-t-module">
		<!--初始化加载-->
		<view class=" init-loading" v-if="status == 'init'">
			<Img  class="img" width="100" height="100" src="hint/loading.gif" />
			<view>数据正在加载</view>
		</view>
		<!--数据加载中-->
		<view class="in-the-load" v-if="status == 'loading'">
			<Img class="img" width="40" height="40" src="hint/loading.gif" />
			<view>{{ loadingText }}</view>
		</view>
		<!--加载无数据-->
		<view class="hint-loadingComplete" v-if="status == 'loadingComplete'">
			<view>{{ loadingCompleteText }}</view>
		</view>
		<!--无数据-->
		<view class="hint-noData" v-if="status == 'noData'">
			<Img class="img" width="400" src="https://m.nocexpo.com/statics/js/modules/h5/img/noData.png" />
			<view>{{ noDataText }}</view>
		</view>
	</view>
</template>

<script>
import Img from '../Image/Img.vue';
export default {
	components: {
		Img
	},
	data() {
		return {
			status: 'none' //不显示任何提示
		};
	},
	props: {
		loadingCompleteText: {
			type: String,
			default: '已到最底部'
		},
		loadingText: {
			type: String,
			default: '加载中'
		},
		noDataText: {
			type: String,
			default: '暂无数据哦'
		}
	},
	mounted() {},

	methods: {
		init() {
			this.status = this.loadState;
		},
		getStatus() {
			if (this.status == 'loadingComplete' || this.status == 'noData' || this.status == 'none') {
				return false;
			}
			return true;
		},

		// 提示类型
		setStatus(status) {
			this.status = status;
		},
		/**
		 * 计算
		 * @param {Object} status
		 */
		calculate({ total, current, pageSize = 10 } = {}) {
			if (total == 0 && current == 1) {
				this.status = 'noData';
				return;
			}
			if (total > 0 && total < pageSize && current == 1) {
				this.status = 'loadingComplete';
				return;
			}
			if (total < pageSize && current > 1) {
				this.status = 'loadingComplete';
				return;
			}
			this.status = 'loading';
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes rotate360 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}

.hint-t-module {
	width: 100%;
	display: flex;
	font-size: 28rpx;
	align-items: center;
	justify-content: center;
	background: $bg-color;
}
.init-loading {
	padding-top: 100rpx;
	max-height: 130rpx;
	.img {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
		display: block;
		margin: 25rpx auto 15rpx;
		animation: rotate360 1s linear infinite;
	}
	view {
		letter-spacing: 2rpx;
		color: #666;
		padding-bottom: 30rpx;
	}
}
.in-the-load {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 30rpx;
	padding: 30rpx 0px;
	color: #666;
	.img {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		display: inline-block;
		margin: 0px 15rpx 0px 0;
		animation: rotate360 1.5s linear infinite;
	}
}
.hint-noData {
	padding: 20% 0%;
	color: #999;
	text-align: center;
	width: 100%;
	image {
		width: 70%;
		margin: auto;
	}
	text {
		color: #999;
		font-size: 100rpx;
	}
	view {
		margin-top: 20rpx;
	}
}
.hint-loadingComplete {
	color: #666;
	font-size: 28rpx;
	padding: 30rpx 0px;
}
</style>
